<template>
  <div class="app-container calendar-list-container">
    <!-- 查询-->
    <el-card>
      <div class="block">
        <span style="color:gray; font-size:16px"> 时间范围:      </span>
        <el-date-picker
          v-model="transactionQuery.timeInterval"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          format="yyyy-MM-dd HH:mm:ss"
          align="right" @change="getSTime">
        </el-date-picker>
        <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="getList(1)" v-perm="'b:alldetail:search'">搜索</el-button>
      </div>
    </el-card>
    <div style="margin-bottom: 10px"></div>
    <span>支付渠道：</span>
    <el-select size="mini" clearable v-model="transactionQuery.pid" placeholder="支付渠道" @change="changePay(1)">
      <el-option v-for="pay in payData"
                 :key="pay.id"
                 :label="pay.modeName"
                 :value="pay.id">
      </el-option>
    </el-select>
    <span>应用渠道：</span>
    <el-select size="mini" clearable v-model="transactionQuery.aid" placeholder="应用渠道" @change="changeApp(1)">
      <el-option v-for="app in appData"
                 :key="app.id"
                 :label="app.channelName"
                 :value="app.id">
      </el-option>
    </el-select>

    <div style="margin-bottom: 10px"></div>

    <el-table size="small" :data="list" v-loading.body="listLoading" id="transactionTable"
              element-loading-text="加载中" border fit highlight-current-row :default-sort="{prop: 'tradeDate', order: 'descending'}">
      <el-table-column align="center" label="交易时间" prop="tradeDate" :formatter="dateFormat">
      </el-table-column>
      <el-table-column align="center" label="流水号" prop="outTradeNo">
      </el-table-column>
      <el-table-column align="center" label="商户/机构流水号" prop="tradeNo">
      </el-table-column>
      <el-table-column align="center" label="订单金额" prop="totalFee">
      </el-table-column>
      <el-table-column align="center" label="已退款金额" prop="refund">
      </el-table-column>
      <el-table-column align="center" label="应用渠道" prop="channelName">
      </el-table-column>
      <el-table-column align="center" label="支付渠道" prop="modeName">
      </el-table-column>
      <el-table-column align="center" label="操作员" prop="operatorName">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tablePage.page"
                     :page-sizes="[10,20,30,50]" :page-size="tablePage.size" layout="total, sizes, prev, pager, next, jumper" :total="tablePage.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import statisticalanalysisApi from '@/api/statisticalanalysis'
  import { allStatistical } from '@/api/transaction'
  import optionApi from '@/api/option'
  import { pageParamNames } from '@/utils/constants'
  import XLSX from 'xlsx'
  import FileSaver from 'file-saver'
  export default {
    name: 'allsummary',
    props: {
      placeholder: null
    },
    data() {
      return {
        payData: [],
        payMap: new Map(),
        appData: [],
        appMap: new Map(),
        statistical: {
          transactionNumber: undefined,
          allTotalFee: undefined,
          tradeNum: undefined,
          refundNum: undefined
        },
        listLoading: false,
        transactionQuery: {
          modeId: undefined, // 支付渠道
          timeInterval: [new Date().setHours(0, 0, 0, 0)-24*60*60*1000*3,new Date(new Date().setHours(23, 59, 59, 59))], // 支付间隔
          channelId: undefined,
          pid: undefined,
          aid: undefined
        },
        list: null,
        tablePage: {
          current: null,
          pages: null,
          size: null,
          total: null
        },
        pickerOptions: {
          shortcuts: [
            { text: '昨天',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            },
            { text: '前天',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                end.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
                picker.$emit('pick', [start, end])
              }
            },
            { text: '最近一周',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            },
            { text: '最近一个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            },
            { text: '最近三个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        }
      }
    },
    created() {
      this.getList()
      this.initData()
      this.initPayData()
    },
    methods: {
      dateFormat: function(row, column) {
        var date = row[column.property]
        if (date === undefined) {
          return ''
        }
        return date.replace('T', ' ').substr(0, 19)
      },
      initData() {
        optionApi.showChannel().then(res => {
          res.data.acOptions.forEach(obj => {
            this.appData.push(obj)
            this.appMap.set(obj.id, obj.channelName)
          })
        })
      },
      initPayData() {
        optionApi.show().then(res => {
          res.data.payOptions.forEach(obj => {
            this.payData.push(obj)
            this.payMap.set(obj.id, obj.modeName)
          })
        })
      },
      getList(current){
        if (current) {
          this.tablePage.current = current
        }
        statisticalanalysisApi.StatisticalDetail(this.transactionQuery,this.tablePage).then(res => {
          this.list = res.data.staAnaDetail.records
          this.listLoading = false
          pageParamNames.forEach(name => this.$set(this.tablePage, name, res.data.staAnaDetail[name]))
        })
      },
      handleSizeChange(val) {
        this.tablePage.size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.tablePage.current = val
        this.getList()
      },
      changePay(current){
        if (current) {
          this.tablePage.current = current
        }
        statisticalanalysisApi.StatisticalDetail(this.transactionQuery,this.tablePage).then(res => {
          this.list = res.data.staAnaDetail.records
          this.listLoading = false
          pageParamNames.forEach(name => this.$set(this.tablePage, name, res.data.staAnaDetail[name]))
        })
      },
      changeApp(current){
        if (current) {
          this.tablePage.current = current
        }
        statisticalanalysisApi.StatisticalDetail(this.transactionQuery,this.tablePage).then(res => {
          this.list = res.data.staAnaDetail.records
          this.listLoading = false
          pageParamNames.forEach(name => this.$set(this.tablePage, name, res.data.staAnaDetail[name]))
        })
      },
      getSTime(val) {
        this.transactionQuery.timeInterval=val;//这个sTime是在data中声明的，也就是v-model绑定的值
      }
    }
  }
</script>
